<template>
  <div class="ProductReviewListItem">
    <div class="ProductReviewListItemContent">
      <white-space/>
      <wing-blank>
        <div class="ReviewListItemLine1">
          <div class="ReviewAuthor">
            <van-image round width="32px" height="32px" :src="review.author.avatar"/>
            {{ authorNickname }}
          </div>
          <span class="ReviewListItemReviewedTime">{{ reviewedDate }}</span>
        </div>
        <white-space/>
        <wing-blank>
          <div class="ReviewListItemLine2">
            <van-rate v-model="review.rating" size="16px" readonly/>
            <div class="Divider"/>
            <div class="ReviewListItemOptions">{{ optionSelectionsStringify }}</div>
          </div>
          <white-space/>
          <div class="ReviewListItemBody">{{ reviewBody }}</div>
        </wing-blank>
      </wing-blank>
      <white-space/>
    </div>
    <white-space/>
  </div>
</template>

<script>
import { catalog } from "@mall/api-services"
import WhiteSpace from "@/components/WhiteSpace"
import WingBlank from "@/components/WingBlank"
import { Cell, Col, Image, Rate, Row } from "vant"
import * as _ from "lodash"
import dayjs from "dayjs"

export default {
  name: "ProductReviewListItem",
  components: {
    WingBlank,
    WhiteSpace,
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Image.name]: Image,
    [Rate.name]: Rate,
  },
  props: {
    review: catalog.Review,
  },
  computed: {
    optionSelectionsStringify() {
      const { review } = this
      const { optionSelections } = review
      return _.chain(optionSelections).map(({ value }) => value).join(" ").value()
    },
    authorNickname() {
      const { review } = this
      const { author } = review
      const { anonymous } = author
      const nickname = _.isEmpty(author.nickname) || _.isUndefined(author.nickname) ? author.username : author.nickname
      if (anonymous) {
        const size = _.size(nickname)
        const firstName = _.first(nickname) ?? ""
        return _.pad(firstName, size, "*")
      }
      return nickname
    },
    reviewedDate() {
      const { review } = this
      const { reviewedTime } = review
      return dayjs(reviewedTime).format("YYYY-MM-DD")
    },
    reviewBody() {
      const { review } = this
      return _.isEmpty(review.body) ? "买家未填写评价内容" : review.body
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.ProductReviewListItem {

  .ProductReviewListItemContent {
    background: #fff;
  }

  .ReviewListItemLine1 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ReviewAuthor {
      display: inline-flex;
      align-items: center;

      .van-image {
        margin-right: 4px;
      }
    }
  }

  .ReviewListItemReviewedTime {
    color: $gray-6;
    font-size: 14px;
  }

  .ReviewListItemLine2 {
    display: flex;
    align-items: center;

    .ReviewListItemOptions {
      color: $gray-6;
      font-size: 14px;
    }
  }

  .ReviewListItemBody {
    line-height: 1.4em;
  }

  .Divider {
    margin: 0 8px;
    border: 0;
    position: relative;

    &:after {
      content: ' ';
      position: absolute;
      left: 0;
      bottom: 0;
      top: -6px;
      background: $gray-4;
      width: 2px;
      height: 12px;
      transform: scaleX(0.5);
      transform-origin: 0 0;
    }
  }
}
</style>
